<template>
	<!-- 访客 -->
	<Top-Page class="visitor-box">
		<NavBar
			title="我的访客"
			left-arrow
			@click-left="navBack()"
			style="box-shadow: none; border-bottom: 1rpx solid #e3e3e3"
		/>

		<view class="collect-box border-bottom-after">
			<view class="collect-item" v-for="(item, index) in collect_list">
				<view class="collect-item-num"> {{ item.num }} </view>
				<view class="collect-item-title"> {{ item.title }} </view>
			</view>
		</view>

		<view class="list-box">
			<view
				class="list-item border-bottom-after"
				v-for="(item, index) in list"
				:key="index"
			>
				<user-avator :src="item.avatar"></user-avator>
				<view class="list-item-right">
					<view class="list-item-right__name"> {{ item.realname }} </view>
					<view class="list-item-right__time"> {{ item.date }} </view>
				</view>
			</view>
		</view>

		<view class="finished-text border-bottom-after" v-if="finished">
			{{ finished_text }}
		</view>
	</Top-Page>
</template>

<script>
	import NavBar from "@/components/NavBar/NavBar.vue";
	import { navBack } from "@/utils/utils.js";

	export default {
		data() {
			return {
				navBack: navBack,
				collect_list: [],
				list: [],
				finished: false,
				finished_text: "",
				page: 0,
			};
		},
		components: { NavBar },
		created() {
			this.firstApi();
		},
		onReachBottom() {
			this.firstApi();
		},
		methods: {
			firstApi() {
				//没有更多了
				if (this.finished) {
					uni.showToast({
						title: "没有更多了",
						icon: "error",
					});
					return;
				}

				this.$api.friendCircleApi
					.circleVisitor({
						page: ++this.page,
					})
					.then((res) => {
						const data = res.data.data ?? [];

						if (!data.length) {
							const msg = this.page == 1 ? "暂无信息" : "没有更多了";

							this.finished_text = msg;

							this.finished = true;
						}

						const arr = [
							{
								num: res.data?.total ?? 0,
								title: "总浏览量",
							},
							{
								num: res.data?.day ?? 0,
								title: "今日访客",
							},
						];

						this.collect_list.push(...arr);

						this.list.push(...data);
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
